<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="~{template}">
<head>
    <title>账户信息</title>
</head>
<body>
<div layout:fragment="content">
    <div id="accountInfo" class="panel panel-info">
        <div class="panel-heading">
            <div class="alert alert-warning" style="display: none" onclick="$(this).hide();">
                <a class="close" href="#" aria-hidden="true">&times;</a>
                <strong>{{ msg }}</strong>
            </div>
            <h2 th:if="${session.loginUser}" th:text="${session.loginUser.name}?:'用户名'"></h2>
            <h1 th:unless="${session.loginUser}">用户名</h1>
            <div class="form-inline" role="form">
                <div class="form-group">
                    <label>金额:</label>
                    <div class="input-group">
                        <div class="input-group-addon">$</div>
                        <input type="text" class="form-control" placeholder="金额" v-model="money">
                    </div>
                </div>
                <button type="submit" class="btn btn-info" @click="deposit">存款</button>
                <button type="submit" class="btn btn-warning" @click="withdrawals">取款</button>
                <button type="submit" class="btn btn-danger" @click="transfer">转账</button>
                <div class="form-group">
                    <label>卡号:</label>
                    <input type="text" class="form-control" placeholder="卡号" v-model="transferModel.toCard">
                </div>
            </div>
        </div>
        <div class="panel-body">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th>用户名</th>
                    <th>卡号</th>
                    <th>余额</th>
                    <th>开户时间</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{{ accountInfo.name }}</td>
                    <td>{{ accountInfo.card }}</td>
                    <td>{{ accountInfo.money }}</td>
                    <td>{{ accountInfo.createTime }}</td>
                </tr>
                </tbody>
            </table>
            <hr/>
            <label>转账记录:</label>
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>源卡号</th>
                    <th>目的卡号</th>
                    <th>金额</th>
                    <th>转账时间</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in accountInfo.transferRecord">
                    <td>{{ item.id }}</td>
                    <td>{{ item.fromCard }}</td>
                    <td>{{ item.toCard }}</td>
                    <td>{{ item.money }}</td>
                    <td>{{ item.createTime }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div layout:fragment="script">
<script th:src="@{/assets/libs/vue-resource/1.3.4/vue-resource.min.js}"></script>

<script th:src="@{/assets/js/account.js}"></script>
</div>
</body>
</html>